<template>
  <div>
    <van-nav-bar
      title="我的报价"
      left-text="返回"
      right-text="新建"
      left-arrow
      @click-right="onClickRight"
      @click-left="onClickLeft"
    />
    <van-search
      placeholder="请输入客户名称"
      @search="search"
      v-model="queryParam.Keyword"
      @clear="clear"
    />
    <div @click="Edit(item.Id)" class="box" v-for="item in data" :key="item.Id">
      <div class="Father">
        <!-- <img
          src="http://36.156.144.139:9000/img/yuangongDef.65d8327a.jpg"
          alt=""
        /> -->
        <div>
          <div class="companyName">{{ item.CustomerName }}</div>
          <div>客户经理:{{ item.AccountManager }}</div>
          <van-button
            class="btn"
            @click.stop="btn([item.Id])"
            size="small"
            type="danger"
            >删除</van-button
          >
        </div>
      </div>
      <!-- 金额合计:{{ item.TotalAmount }} 客户经理:{{ item.AccountManager }} -->
    </div>
    <Edit :parentObj="this" ref="edit" />
  </div>
</template>

<script>
import { Card } from "vant";
import { Search, NavBar, Dialog } from "vant";
import Edit from "./Edit.vue";
export default {
  components: {
    "van-nav-bar": NavBar,
    "van-card": Card,
    "van-search": Search,
    Edit
  },
  data() {
    return {
      Keyword: "",
      data: [],
      queryParam: {}
    };
  },
  created() {
    this.getDataList();
  },
  methods: {
    btn(id) {
      Dialog.confirm({
        message: "确定要删除吗",
         confirmButtonColor:'#1989fa'
      })
        .then(() => {
          this.http
            .post(
              "/QuotationManagement/Quot_OfferSheetMain/DeleteDataOfAll",
              id
            )
            .then(resJson => {
              if (resJson.Success) {
                this.$toast("删除成功");
                // this.getDataList();
              } else {
                this.$toast("删除失败");
              }
            });
        })
        .catch(() => {
          console.log(123);
        });
    },
    clear() {
      console.log(123);
      this.queryParam = {};
      this.getDataList();
    },

    onClickLeft() {
      this.$router.go(-1);
    },
    onClickRight() {
      this.$refs.edit.openForm();
    },
    //弹出页面
    Edit(Id) {
      // console.log("编辑", Id);
      this.$refs.edit.openForm(Id);
    },
    //搜索
    search(value) {
      console.log(value);
      this.queryParam.Condition = "CustomerName";
      this.queryParam.Keyword = value;
      this.getDataList();
    }

    // getDataList() {
    //   this.selectedRowKeys = [];

    //   this.loading = true;
    //   this.http
    //     .post(
    //       "/QuotationManagement/Quot_OfferSheetMain/GetDataListByConditions",
    //       {
    //         PageIndex: 1,
    //         PageRows: 99,
    //         SortField: "Id",
    //         SortType: "asc",
    //         Search: [this.queryParam]
    //       }
    //     )
    //     .then(resJson => {
    //       this.data = resJson.Data;
    //       // console.log(this.data);
    //     });
    // }
  }
};
</script>

<style scoped>
.btn {
  position: absolute;
  bottom: 0;
  right: 0;
}
.companyName {
  margin-bottom: 5px;
  font-size: 18px;
}
.box {
  box-shadow: 2px 2px 5px #ccc;
  border-radius: 5px;
  position: relative;
  width: 80%;
  height: 85px;
  margin-bottom: 10px;
  /* background-color: #7bbfea; */
  border-radius: 10px 10px 0 0;
}
img {
  width: 100px;
  height: 100px;
}
.Father {
  display: flex;
}
</style>
